<script setup>

import { ref, onMounted } from 'vue';
import close from '@/assets/icon/close.svg';
import { ElMessage } from 'element-plus'
import { typeCount } from '@/utils/api.js'

import { useRouter } from 'vue-router'
const route = useRouter();

import shoulei from '@/assets/img/1shoulei.png';
import niaolei from '@/assets/img/2niaolei.png';
import kunchong from '@/assets/img/3kunchong.png';
import zhuxing from '@/assets/img/4zhuxing.png';
import yulei from '@/assets/img/5yulei.png';
import paxing from '@/assets/img/6paxing.png';
import liangqi from '@/assets/img/7liangqi.png';
import dongwu from '@/assets/img/8dongwu.png';
import qiaomu from '@/assets/img/9qiaomu.png';
import guanmu from '@/assets/img/10guanmu.png';
import caoben from '@/assets/img/11caoben.png';
import tengben from '@/assets/img/12tengben.png';
import zhiwu from '@/assets/img/13zhiwu.png';
import zhenjun from '@/assets/img/14zhenjun.png';

import dwdata from '@/assets/img/dwdata.png';
import zwdata from '@/assets/img/zwdata.png';
import zjdata from '@/assets/img/zjdata.png';


const aptype = ref([
    {
        id: 'xx001',
        name: "动物鉴定",
        specieType: "animal",
        list: [
            {
                id: 'x1001',
                name: "资源调查(兽类)",
                resourceType: "兽类",
                surveyType: "res",
                url: shoulei,
                identified: 10,
                unidentified: 10
            },
            {
                id: 'x1002',
                name: "资源调查(鸟类)",
                resourceType: "鸟类",
                surveyType: "res",
                url: niaolei,
                identified: 10,
                unidentified: 10
            },
            {
                id: 'x1003',
                name: "资源调查(昆虫)",
                resourceType: "昆虫",
                surveyType: "res",
                url: kunchong,
                identified: 10,
                unidentified: 10
            },
            {
                id: 'x1004',
                name: "资源调查(蛛形)",
                resourceType: "蛛形",
                surveyType: "res",
                url: zhuxing,
                identified: 10,
                unidentified: 10
            },
            {
                id: 'x1005',
                name: "资源调查(鱼类)",
                resourceType: "鱼类",
                surveyType: "res",
                url: yulei,
                identified: 10,
                unidentified: 10
            },
            {
                id: 'x1006',
                name: "资源调查(爬行)",
                resourceType: "爬行",
                surveyType: "res",
                url: paxing,
                identified: 10,
                unidentified: 10
            },
            {
                id: 'x1007',
                name: "资源调查(两栖)",
                resourceType: "两栖",
                surveyType: "res",
                url: liangqi,
                identified: 10,
                unidentified: 10
            },
            {
                id: 'x1008',
                name: "日常巡护(动物)",
                surveyType: "patrol",
                resourceType: "",
                url: dongwu,
                identified: 10,
                unidentified: 1000
            },
            {
                id: 'x1009',
                name: "数据上传(动物)",
                surveyType: "data",
                resourceType: "",
                url: dwdata,
                identified: 10,
                unidentified: 1000
            },
        ]
    },
    {
        id: 'xx002',
        name: "植物鉴定",
        specieType: "plant",
        list: [
            {
                id: 'x1001',
                name: "资源调查(乔木)",
                resourceType: "乔木",
                surveyType: "res",
                url: qiaomu,
                identified: 10,
                unidentified: 10
            },
            {
                id: 'x1002',
                name: "资源调查(灌木)",
                resourceType: "灌木",
                surveyType: "res",
                url: guanmu,
                identified: 10,
                unidentified: 10
            },
            {
                id: 'x1002',
                name: "资源调查(草本)",
                resourceType: "草本",
                surveyType: "res",
                url: caoben,
                identified: 10,
                unidentified: 10
            },
            {
                id: 'x1003',
                name: "资源调查(藤本)",
                resourceType: "藤本",
                surveyType: "res",
                url: tengben,
                identified: 10,
                unidentified: 10
            },
            {
                id: 'x1004',
                name: "日常巡护(植物)",
                resourceType: "",
                surveyType: "patrol",
                url: zhiwu,
                identified: 10,
                unidentified: 10
            },
            {
                id: 'x1005',
                name: "数据上传(植物)",
                surveyType: "data",
                resourceType: "",
                url: zwdata,
                identified: 10,
                unidentified: 1000
            },
        ]
    },
    {
        id: 'xx003',
        name: "真菌鉴定",
        specieType: "fungus",
        list: [
            {
                id: 'x1001',
                name: "资源调查(真菌)",
                resourceType: "",
                surveyType: "res",
                url: zhenjun,
                identified: 10,
                unidentified: 10
            },
            {
                id: 'x1005',
                name: "数据上传(真菌)",
                surveyType: "data",
                resourceType: "",
                url: zjdata,
                identified: 10,
                unidentified: 1000
            }
        ]
    }
])

const gettypeCount = async () => {
    let id = usermsg.areaId;
    let res = await typeCount(id)
    if (res.code == '200') {
        let ob = res.data;
        // 兽类
        aptype.value[0].list[0].identified = ob.resAnimal_identify_shoulei;
        aptype.value[0].list[0].unidentified = ob.resAnimal_unidentify_shoulei;
        // 鸟类
        aptype.value[0].list[1].identified = ob.resAnimal_identify_niaolei;
        aptype.value[0].list[1].unidentified = ob.resAnimal_unidentify_niaolei;
        //昆虫
        aptype.value[0].list[2].identified = ob.resAnimal_identify_kunchong;
        aptype.value[0].list[2].unidentified = ob.resAnimal_unidentify_kunchong;
        //蛛形
        aptype.value[0].list[3].identified = ob.resAnimal_identify_zhuxing;
        aptype.value[0].list[3].unidentified = ob.resAnimal_unidentify_zhuxing;
        // 鱼类
        aptype.value[0].list[4].identified = ob.resAnimal_identify_yulei;
        aptype.value[0].list[4].unidentified = ob.resAnimal_unidentify_yulei;
        // 爬行
        aptype.value[0].list[5].identified = ob.resAnimal_identify_paxing;
        aptype.value[0].list[5].unidentified = ob.resAnimal_unidentify_paxing;
        // 两栖
        aptype.value[0].list[6].identified = ob.resAnimal_identify_liangqi;
        aptype.value[0].list[6].unidentified = ob.resAnimal_unidentify_liangqi;
        // 动物
        aptype.value[0].list[7].identified = ob.patrolAnimal_identify;
        aptype.value[0].list[7].unidentified = ob.patrolAnimal_unidentify;
        // 数据
        aptype.value[0].list[8].identified = ob.dataAnimal_identify_dataupload;
        aptype.value[0].list[8].unidentified = ob.dataAnimal_unidentify_dataupload;

        // 乔木
        aptype.value[1].list[0].identified = ob.resPlant_identify_qiaomu;
        aptype.value[1].list[0].unidentified = ob.resPlant_unidentify_qiaomu;
        // 灌木
        aptype.value[1].list[1].identified = ob.resPlant_identify_guanmu;
        aptype.value[1].list[1].unidentified = ob.resPlant_unidentify_guanmu;
        // 草本
        aptype.value[1].list[2].identified = ob.resPlant_identify_caoben;
        aptype.value[1].list[2].unidentified = ob.resPlant_unidentify_caoben;
        // 藤本
        aptype.value[1].list[3].identified = ob.resPlant_identify_tengben;
        aptype.value[1].list[3].unidentified = ob.resPlant_unidentify_tengben;
        // 植物
        aptype.value[1].list[4].identified = ob.patrolPlant_identify;
        aptype.value[1].list[4].unidentified = ob.patrolPlant_unidentify;
        aptype.value[1].list[5].identified = ob.dataPlant_identify_dataupload;
        aptype.value[1].list[5].unidentified = ob.dataPlant_unidentify_dataupload;
        //真菌
        aptype.value[2].list[0].identified = ob.resFungus_identify;
        aptype.value[2].list[0].unidentified = ob.resFungus_unidentify;
        aptype.value[2].list[1].identified = ob.dataFungus_identify_dataupload;
        aptype.value[2].list[1].unidentified = ob.dataFungus_unidentify_dataupload;
    }
};


// 分页 E
const godetails = (x, y, z, n) => {
    route.push({ path: '/appraises/details', query: { specieType: x, resourceType: y, surveyType: z, name: n } });
};
let usermsg = "";
onMounted(() => {
    usermsg = window.sessionStorage.getItem('usermsg');
    if (usermsg == undefined) {
        alert('您无权查看该网站，请登录后才能正常使用')
    } else {
        usermsg = JSON.parse(usermsg);
    };
    gettypeCount();
})

</script>
<template>
    <div class="app-container">
        <div class="ha-title" style="margin-bottom: 16px;">
            <div>
                <span>专家鉴定</span>
            </div>
        </div>
        <div class="ap-con scol">
            <!-- 类型 -->
            <div class="ap-t-con" v-for="(i, index) in aptype" :key="i.id">
                <!-- 标题 -->
                <div class="ap-t-t">
                    <div class="ap-t-t-w">
                        <span>
                            {{ i.name }}
                        </span>
                    </div>
                    <!-- <div>
                        <span>总计</span>
                        <span class="ap-t-t-c">0照片/ 0视频</span>
                    </div>
                    <div>
                        <span>已鉴定</span>
                        <span class="ap-t-t-c">0照片/ 0视频</span>
                    </div>
                    <div>
                        <span>未鉴定</span>
                        <span class="ap-t-t-c">0照片/ 0视频</span>
                    </div> -->
                </div>
                <!-- 表单 -->
                <ul class="ap-t-f">
                    <li v-for="(it, ix) in i.list" :key="it.id">
                        <div class="ap-t-li-t">
                            <div class="ap-t-f-t1">
                                <img :src="it.url" alt="">
                            </div>
                            <div class="ap-t-f-t">
                                <div>{{ it.name }}</div>
                                <div><span style="color: #606266;">未鉴定</span><span
                                        style="color: #aaa;margin-left: 5px;">{{
                                            it.unidentified }}条</span>
                                </div>
                                <div><span style="color: #606266;">已鉴定</span><span
                                        style="color: #aaa;margin-left: 5px;">{{
                                            it.identified
                                        }}条</span></div>
                            </div>
                        </div>
                        <!-- 详情 -->
                        <div class="ap-t-li-b"
                            @click.stop="godetails(i.specieType, it.resourceType, it.surveyType, it.name)">
                            <span>前往鉴定>></span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

    </div>
</template>
<style scoped>
.app-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.ap-con {
    width: 100%;
    height: calc(100% - 48px);
    background-color: #fff;
}

.ap-t-con {
    width: 100%;
    overflow: hidden;
}

.ap-t-t {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    overflow: hidden;
}

.ap-t-t-w {
    font-size: 16px;
    font-weight: 700;
}

.ap-t-t>div {
    margin-right: 16px;
}

.ap-t-t span {
    margin-left: 8px;
}

.ap-t-t-c {
    color: #387BFF;
}

.ap-t-f {
    width: 100%;
    padding: 0 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* overflow: hidden; */
}

.ap-t-f li {
    width: calc((100% - 96px) / 7);
    height: 180px;
    border-radius: 4px;
    margin: 0 16px 16px 0;
    box-shadow: 0 0 5px rgba(220, 223, 230, 1);
    overflow: hidden;
    box-sizing: border-box;
}

.ap-t-f li:nth-child(7n) {
    margin-right: 0;
}

.ap-t-li-t {
    width: 100%;
    height: 130px;
    display: flex;
}

.ap-t-li-t>div {
    height: 100%;
    flex-shrink: 0;
    display: flex;
}


.ap-t-f-t1 {
    flex: 4;
    align-items: center;
    justify-content: center;
}

.ap-t-f-t1 img {
    width: 60px;
    height: 60px;
}

.ap-t-f-t {
    flex: 6;
    line-height: 30px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.ap-t-li-b {
    width: 100%;
    height: 50px;
    color: #387BFF;
    border-top: 1px solid #DCDFE6;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
</style>